CSS 起手式

1. wirerame + BEM命名

   • 分析結構
   • 定義區塊、class name

2. 使用 CSS Preprocessor CSS預處理器: Sass/SCSS
   Codepen環境，Setting > CSS > CSS Preprocessor >SCSS
   Node.js環境的sass工具包
   npm install -g sass npm install -g sass --force
   確認安裝成功 which sass sass --version
   內建說明書 sass -help

3. Reset CSS
   依需求找範本，設定把瀏覽器給HTML元素的CSS屬性預設值歸零。
   button { border: 0;}

4. .editorconfig檔
   縮排設定
5. CSS variable
   全域設定 :root {}
   建立變數 --變數名稱: 值
   顏色和svg檔給予變數名稱
6. data-theme屬性
   同HTML架構，變換模式
7. width: device-width; 讓網頁內容與裝置螢幕寬度一致
   
8. .container { max-width: ~px;}
9. 元素應使用相對寬度，而非絕對寬度，可確保元素符合 viewport大小。
   => 因為 不同裝置 有不同螢幕解析度&像素密度。
10. 字體 使用 相對單位 em
    父元素 font-size: 16px;
    子元素 font-size: 1em (= 16px); | 0.5em (= 8px)
11. 限制彈性 e.g.: img 隨父元素縮放。 用 max, min來控制。

    img { 
    width: 100%;
    max-width: 960px;
    }
    

style.css

html, body {
  padding: 0;
  margin: 0;
  background: #eee;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000;
}
ul, li {
 list-style: none;
}
button {
  border: none;
}

CSS Reset 與 CSS normalize